<template>
	<view>
		<u-popup v-model="show" mode="bottom" border-radius="15">
			<h2 style="margin: 20rpx;">新建群组</h2>
			<u-row gutter="16">
				<u-col span="2">
					<view class="u-avatar-wrap">
						<u-avatar :src="groupImg" size="80" @click="upload()"></u-avatar>
					</view>
				</u-col>
				<u-col span="10">
					<view class="u-avatar-wrap">
						群头像
					</view>
				</u-col>
				<u-col span="12">
					<u-input placeholder="群名称" v-model="groupName" type="text" :border="true" />
				</u-col>
			</u-row>
			<u-row gutter="16">
				<u-col span="12">
					<u-button type="primary" @click="create()" style="margin-bottom: 100rpx;">确认</u-button>
				</u-col>
			</u-row>
		</u-popup>
		
		<view class="wrap">
			<u-navbar :is-back="false" title="添加">
				<div style="position: absolute;right: 10rpx;">
					<u-icon name="plus" color="#909399" size="60" @click="show = true"></u-icon>
				</div>
			</u-navbar>

			<u-search bg-color="#ffffff" placeholder="搜索群" shape="square" height="80" v-model="keyword" margin="0rpx 0rpx 20rpx 0rpx"
			 @custom="search(keyword)"></u-search>

			<u-row gutter="16" v-for="(item, index) in indexList" :key="index">
				<u-col span="2">
					<view class="demo-layout bg-purple">
						<u-avatar :src="item.groupImg" size="70"></u-avatar>
					</view>
				</u-col>
				<u-col span="9">
					<view class="demo-layout bg-purple">
						<h4>{{item.groupName}}</h4>
						<h5>ID:{{item.id}}</h5>
					</view>
				</u-col>
				<u-col span="1">
					<view class="demo-layout bg-purple" @click="add(item)">
						<u-icon name="plus" color="#909399" size="40"></u-icon>
					</view>
				</u-col>
			</u-row>

		</view>
		<u-tabbar v-model="current" :list="downList" :mid-button="false" :before-switch="beforeSwitch"></u-tabbar>
	</view>
</template>

<script src="./add.js">
	
</script>

<style src="./add.css">

</style>
